<template>
	<view class="benefits-card">
		<view class="title">
			限时定购权益
			<view class="content" v-for="(item,index) in titleInfo">
				<text> 权益{{index + 1}}:</text> {{item}}
			</view>
		</view> 
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	const porps = defineProps({
		titleInfo: {
			type: Object,
			default: ()=>{}
		}
	})
</script>

<style scoped>
	.benefits-card {
		margin: 0 20rpx;
		margin-top: 10rpx;
		font-family: "仓耳渔阳体 W05";
		background-image: linear-gradient(45deg, #f5f5f5, rgb(255,226,201));
		padding: 26rpx 30rpx;
		border-radius: 14rpx;
	}
	.title{
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}
	.content{
		display: flex;
		font-size: 24rpx;
		gap: 8rpx;
		color: rgba(166, 166, 166, 1);
		padding: 0 12rpx;
	}
	.content > text{
		color: #595959;
	}
</style>